<template>
  <div id="businessLabel">
    <el-form ref="form" :model="form" label-width="120px" class="form">
      <el-select v-model="labelGroup" placeholder="请选择" @change="set" class="select">
        <el-option
          v-for="item in list"
          :key="item.labelGroupId"
          :label="item.labelGroupName"
          :value="item" >
        </el-option>
      </el-select>
      <el-select v-model="labelId" :multiple="multiple" placeholder="请选择" class="select">
        <el-option
          v-for="items in childList"
          :key="items.labelId"
          :label="items.labelName"
          :value="items.labelId">
        </el-option>
      </el-select>
      <el-button @click="getSel">添加</el-button>
    </el-form> 
    <div class="labelBox">
      <span v-for="item in businessLabelList" :key="item.label">{{item.labelName}}
        <div @click="deleted(item)" class="closeIcon">X</div>
      </span>
    </div>
    <el-checkbox-group v-model="arr" class="isShowBox">
        <el-checkbox v-for="bb in businessLabelList" :key="bb.name" :label="bb.id">{{bb.labelName}}</el-checkbox>
        <el-button @click="showLabel">展示标签</el-button>
    </el-checkbox-group>
    <div class="buttonBox" v-if="route.name=='addBusiness'">
      <div class="button" @click="goTo('info')">上一步</div>
      <div class="button" @click="goTo('intro')">下一步</div>
    </div>
    <div class="buttonBox" v-if="route.name=='editBusiness'">
      <div class="button" @click="save">保存</div>
    </div>
  </div>
</template>
<script>
import { labelTotal } from 'api/label'
import { companyUpdateCompanyLabel, companyLabelList, companyLabelAdd, companyLabelDelete } from 'api/business'
export default {
  data() {
    return {
      form: JSON.parse(sessionStorage.getItem('businessInfo')),
      multiple: false,
      checkList: [],
      list: [],
      childList: [],
      labelId: [],
      value: [],
      businessLabelList: [],
      arr: [],
      companyId: sessionStorage.getItem('businessId')
    }
  },
  created() {
    this.getGroupList()
    this.companyLabelList()
  },
  computed: {
    labelGroup: {
      get() {
        return this.value.labelGroupName
      },
      set(value) {
        this.value = value
      }
    },
    route() {
      return this.$route
    }
  },
  methods: {
    save() {
      this.$alert('保存成功', '提示')
    },
    async showLabel() {
      const parm = {
        companyId: sessionStorage.getItem('businessId') || this.companyId,
        showIds: this.arr
      }
      try {
        let back = await companyUpdateCompanyLabel(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.$alert('设置成功', '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async deleted(item) {
      try {
        let back = await companyLabelDelete(item.id)
        back = back.data
        if (back.resultCode === '200') {
          this.companyLabelList()
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async companyLabelList() {
      try {
        const companyId = sessionStorage.getItem('businessId') || this.companyId
        let back = await companyLabelList(companyId)
        back = back.data
        if (back.resultCode === '200') {
          this.businessLabelList = [...back.result]
          for (let i = 0; i < back.result.length; i++) {
            if (back.result[i].isShow === 'YES') {
              this.arr.push(back.result[i].id)
            }
          }
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    handleChange(value) {
      console.log(value)
    },
    async getGroupList() {
      try {
        let back = await labelTotal()
        back = back.data
        if (back.resultCode === '200') {
          this.list = { ...back.result }
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    goTo(parm) {
      this.$emit('goTo', parm)
    },
    set(parm) {
      if (parm.isUnique === 1) {
        this.labelId = ''
        this.multiple = false
      } else {
        this.labelId = []
        this.multiple = true
      }
      this.childList = parm.labelResponseDTOList
    },
    async getSel() {
      if (!this.labelId || this.labelId.length === 0) {
        this.$alert('请选择标签项', '提示')
        return
      }
      // 如果是多选
      if (this.multiple === true) {
        const arr = []
        for (let i = 0; i < this.labelId.length; i++) {
          arr[i] = {
            labelGroupId: this.value.labelGroupId,
            labelId: this.labelId[i],
            isShow: 'NO'
          }
        }
        this.addLabel(arr)
      } else {
        const parm = [
          {
            labelGroupId: this.value.labelGroupId,
            labelId: this.labelId,
            isShow: 'NO'
          }
        ]
        this.addLabel(parm)
      }
    },
    async addLabel(arr) {
      const parm = {
        companyId: sessionStorage.getItem('businessId') || this.companyId,
        labelList: arr
      }
      try {
        let back = await companyLabelAdd(parm)
        back = back.data
        console.log(back)
        if (back.resultCode === '200') {
          console.log(back.reuslt)
          this.labelId = []
          this.value = []
          this.companyLabelList()
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .form{
    margin-top:50px;
  }
  .buttonBox{
    overflow: hidden;
    .button{
      float: left;
      width:200px;
      height:40px;
      line-height: 40px;
      border-radius: 5px;
      margin:40px ;
      color:white;
      background: #409EFF;
      text-align: center;
      cursor: pointer;
    }
  }
  .labelBox{
    width:1000px;
    height:200px;
    margin-top:50px;
    margin-left:50px;
    border:1px solid #ccc;
    padding:20px;
    span{
      display: inline-block;
      margin:0 10px;
      position: relative;
      padding:5px 10px;
      border-radius: 5px;
      background: #F0F2F5;
    }
    .closeIcon{
      display: inline-block;
      width:15px;
      height:15px;
      border-radius: 7.5px;
      line-height: 15px;
      text-align: center;
      background: #C0C4CC;
      font-size:6px;
      vertical-align: middle;
      color:white;
      margin-left:3px;
      &:hover{
        background: #909399;
      }
    }
  }
  .select{
    &:nth-child(1){
      margin-left:50px;
    }
    margin:0 10px;
  }
  .isShowBox{
    margin-left:50px;
    margin-top:20px;
    .el-button{
      margin-left:15px;
    }
  }
</style>


